// import { postDecisionFlowAdd } from '@/api';
import { MciSvgIcon } from '@/components/base';
// import { ElStatistic } from 'element-plus';

export const SumItem = defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: ''
    }
  },
  emits: ['refreshList'],
  setup(props) {
    const numVal = ref(0);
    const titleVal = ref('分类标题');

    watch(
      () => [props.title, props.value],
      () => {
        titleVal.value = props.title;
        numVal.value = props.value;
      },
      { immediate: true, deep: true }
    );

    return () => (
      <div class="p-16 flex flex-col">
        {/* <ElStatistic
          title={titleVal.value}
          value={numVal.value}
          value-style={{ fontSize: '20px', color: props.color}}
          v-slots={{
            prefix: () => (
                <div class=''>
                  <MciSvgIcon name="sum" width={ 24 } />
                </div>
            )
          }}></ElStatistic> */}
        <span class="text-gray-9" style={{ 'color': '#4E5969' }}>{titleVal.value}</span>
        <div class="items-center mt-8 flex ">
          <MciSvgIcon name="sum" />
          <div class="text-20px ml-4" style={{ 'color': props.color ? props.color : '#1D2129' }}>{numVal.value.toLocaleString()}</div>
        </div>
      </div>
    );
  }
});
